<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
    <div class="babyTotal main_allScroll">
        <div class="babyTotal_bg_icon babyTotal_box">
            <div class="baby_t">
                <router-link to="/my/baby/baby_detail" class="baby_t_t">宝呗明细</router-link>
            </div>
            <div class="baby_t">
                <span style="font-size: .28rem;color: #e0e0e0">宝呗总量</span>
            </div>
            <div class="baby_t">
                <span style="font-size: .8rem;color: #fff">{{total}}个</span>
            </div>
        </div>
        <group>
            <cell title="宝呗购买" is-link link="/my/baby/babyBuy">
                <div slot="icon" style="margin: 0 0.32rem 0 0" class="babyBuy_icon"></div>
            </cell>
            <cell title="宝呗转让" is-link @click.native="transfer" >
                <div slot="icon" style="margin: 0 0.32rem 0 0" class="baby_transfer"></div>
            </cell>
        </group>
    </div>
    </div>

</template>
<script>
    import { Cell, Group} from 'vux'
    import {mapState} from 'vuex'
    export default {
        name:'babyTotal',
        components: {
            Cell,
            Group,
        },
        data(){
            return {
                total:0
            }
        },
        activated(){
            this.total = 0;
            this.getBaobei();
        },
        methods:{

            getBaobei() {
                this.$ajax.finance.getVirtualcoinInfo()
                    .then(res => {
                        this.total = res.body.content.amount && res.body.content.amount != null? res.body.content.amount:0;
                    })
            },
            transfer(){
                if ( this.user.authentication != "1") {
                    let that = this;
                    this.$vux.confirm.show({
                        title: '操作提示',
                        content: '您还未进行实名认证，是否前去认证？',
                        onConfirm() {
                            that.$router.push({path: '/my/verified'});
                        }
                    })
                } else {
                    this.$router.push({
                        path: '/my/baby/transfer'
                    })
                }
            }
        },
        computed : mapState({user :state=> state.user})
    }
</script>
<style>
    .babyTotal .vux-no-group-title{
        margin-top: 0;
    }
</style>
<style lang="less" scoped>
    .babyTotal_box{
        padding: 0.24rem 0.3rem;
        margin-bottom: 0.2rem;
        .baby_t{
            display: flex;
            justify-content: center;
            &:first-child{
                justify-content: flex-end;
                margin-bottom: .18rem;
            }
            &:first-child{
                justify-content: flex-end;
                margin-bottom: .18rem;
            }
            &:last-child{
                margin-top: .36rem;
            }
            .baby_t_t{
                color: #fff;
                font-size: 0.24rem;
                line-height: 0.4rem;
                border: 1px solid #fff;
                padding: 0 0.24rem;
                border-radius: 0.4rem;
            }
        }

    }
</style>